/*
 * @Author: wangdengduo
 * @Date: 2023-05-10 09:42:56
 * @LastEditors: wangdengduo
 * @LastEditTime: 2023-05-10 10:25:43
 * @FilePath: \todo\src\components\item\index.js
 * @Description: 
 */
import { useEffect, useState } from "react";
import { Input, Checkbox, DatePicker, Button } from "antd";
import { DeleteOutlined } from "@ant-design/icons";
import moment from 'moment';

import "./index.css";

const Item = (props) => {
  const [isEdit, setIsEdit] = useState(false);
  const [value, setValue] = useState("");
  const [deadline, setDeadline] = useState("");
  const [itemClassName, setItemClassName] = useState();

  useEffect(() => {
    let { todo } = props;
    let itemClassName = "item";
    itemClassName += todo.hasCompleted ? " completed" : "";
    itemClassName += isEdit ? " editing" : "";
    setItemClassName(itemClassName);
  });

  const onEdit = () => {
    //双击列表时，对列表中的内容进行编辑
    let { todo } = props;
    let { value, deadline } = todo;
    if (todo.hasCompleted) return;
    setIsEdit(true);
    setValue(value);
    setDeadline(deadline);
  };

  const changeFval = (e) => {
    setValue(e.target.value);
  };

  const onUpdateTimeChange = (date, dateString) => {
    setDeadline(dateString);
  };


  const itemEditDone = () => {
    setIsEdit(false);
    let { itemEditDone, todo } = props;
    itemEditDone(todo, value, deadline);
  };

  const onUpdate = () => {
    itemEditDone();
  };

  return (
    <li className={itemClassName}>
      {isEdit ? (
        <div className="wrap-search edit-input">
          <Input
            type="text"
            className="edit"
            value={value}
            onChange={changeFval}
          />
          <DatePicker defaultValue={moment(props.todo.deadline)} onChange={onUpdateTimeChange} style={{ height: '38px' }} />
          <Button onClick={onUpdate} style={{ height: '38px', marginLeft: '10px' }} type="default">修改</Button>
        </div>
      ) : (
        <div className="view" onDoubleClick={onEdit}>
          <Checkbox
            className="check-box"
            checked={props.todo.hasCompleted}
            onChange={(ev) => props.singleSelect(props.todo)}
          />
          <label htmlFor="" className="label">
            {props.todo.value}
          </label>

          <label className="item-deadline">
            {props.todo.deadline}
          </label>
          <DeleteOutlined
            className="delButton"
            style={{ fontSize: '16px', color: '#f00' }}
            onClick={(ev) => props.onDestroy(props.todo)}
          ></DeleteOutlined>
        </div>
      )}
    </li>
  );
};

export default Item;
